<template>
  <div>
    <DynamicTable
      :row-selection="rowSelection"
      :data-request="loadTableData"
      :columns="columns"
      showIndex
    >
      <template #toolbar>
        <a-button v-if="rowSelection.selectedRowKeys?.length" type="error" @click="delDictMult()">
          <DeleteOutlined />删除
        </a-button>
        <a-button type="primary" @click="openMenuModal({})"> <PlusOutlined />新增 </a-button>
      </template>
    </DynamicTable>
  </div>
</template>

<script lang="tsx" setup>
  import { createVNode, reactive, ref, h } from 'vue';
  import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import {
    baseColumns,
    type TableListItem,
    type TableColumnItem,
  } from '@/views/system/dict/columns';
  import { useFormSortSchema } from '@/views/system/dict/formSchemas';
  import type { TableRowSelection } from 'ant-design-vue/es/table/interface';
  import { getDictList, deleteDict, createDict, editDict } from '@/api/system/dict';
  import { useTable } from '@/components/core/dynamic-table';
  import { useFormModal } from '@/hooks/useModal/useFormModal';
  import { Modal } from 'ant-design-vue';

  defineOptions({
    name: 'DictList',
  });

  const selectDicts = ref<API.DictListResultItem[]>([]);

  const rowSelection = reactive<TableRowSelection<API.DictListResultItem>>({
    selectedRowKeys: [],
    onChange: (selectedRowKeys, selectedRows) => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      rowSelection.selectedRowKeys = selectedRowKeys;
      selectDicts.value = selectedRows;
    },
  });

  const [DynamicTable, dynamicTableInstance] = useTable({
    size: 'small',
    rowKey: 'no',
    bordered: true,
  });
  const [showModal] = useFormModal();

  const loadTableData = async (params) => {
    const data = await getDictList({
      ...params,
      pageSize: params.limit,
      pageNum: params.page,
    });
    rowSelection.selectedRowKeys = [];

    return {
      list: data.rows || [],
      pagination: {
        total: data.total,
        size: params.limit,
        page: params.page,
      },
    };
  };

  const openMenuModal = async (record: Partial<TableListItem>) => {
    const [formRef] = await showModal({
      modalProps: {
        title: `${record.createTime ? '编辑' : '新增'}字典`,
        width: 700,
        onFinish: async (values) => {
          console.log('新增/编辑字典', values);
          // record.id && (values.id = record.id);
          await (record.createTime ? editDict : createDict)(values);
          dynamicTableInstance.reload();
        },
      },
      formProps: {
        labelWidth: 100,
        schemas: useFormSortSchema(),
      },
    });

    formRef?.setFieldsValue({
      ...record,
    });
  };
  const delRowConfirm = async (record: any) => {
    await deleteDict(record);
    dynamicTableInstance.reload();
  };

  const delDictMult = async () => {
    Modal.confirm({
      title: '确认删除？',
      icon: createVNode(DeleteOutlined),
      onOk: () => delRowConfirm(selectDicts.value),
    });
  };

  const columns: TableColumnItem[] = [
    ...baseColumns,
    {
      title: '操作',
      width: 220,
      dataIndex: 'ACTION',
      hideInSearch: true,
      align: 'center',
      actions: ({ record }) => [
        {
          label: '编辑',
          icon: h(EditOutlined),
          onClick: () => openMenuModal(record),
        },
        {
          label: '删除',
          danger: true,
          icon: h(DeleteOutlined),
          popConfirm: {
            title: '你确定要删除吗？',
            onConfirm: () => delRowConfirm([record]),
          },
        },
      ],
    },
  ];
</script>
